import React, { useState } from 'react';
import { Card, Table, Button, Space, Switch, Input, Select, Form, Modal, Radio, message } from 'antd';
import { PlusOutlined, SearchOutlined, EditOutlined, DeleteOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;

interface DomainItem {
  key: string;
  code: string;
  name: string;
  remark: string;
  type: string;
  enabled: boolean;
  sortNo: string;
  hasDropdown?: boolean;
}

const DataDomain: React.FC = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      console.log('Values:', values);
      setVisible(false);
      form.resetFields();
      message.success('值域添加成功');
    }).catch(info => {
      console.log('Validate Failed:', info);
    });
  };

  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
  };

  const handleStatusChange = (checked: boolean, record: DomainItem) => {
    console.log(`状态变更: ${checked ? '启用' : '禁用'}`, record);
    message.success(`${record.name} 已${checked ? '启用' : '禁用'}`);
  };

  // 根据图片创建更真实的数据
  const data: DomainItem[] = [
    {
      key: '1',
      code: 'CV02.01.101',
      name: '身份证件类别代码表',
      remark: '身份证件类别代码表',
      type: 'CV',
      enabled: true,
      sortNo: '100001',
      hasDropdown: true
    },
    {
      key: '2',
      code: 'CV02.01.102',
      name: '出生(分娩)地点类别代码表',
      remark: '出生(分娩)地点类别代码表',
      type: 'CV',
      enabled: true,
      sortNo: '100002',
      hasDropdown: true
    },
    {
      key: '3',
      code: 'CV02.01.103',
      name: '死亡地点类别代码表',
      remark: '死亡地点类别代码表',
      type: 'CV',
      enabled: true,
      sortNo: '100003',
      hasDropdown: true
    },
    {
      key: '4',
      code: 'GB/T 2261.1-2003',
      name: '性别',
      remark: '',
      type: 'GB/T',
      enabled: true,
      sortNo: '200001',
      hasDropdown: false
    },
    {
      key: '5',
      code: 'CV02.01.201',
      name: '血缘关系代码表',
      remark: '血缘关系代码表',
      type: 'CV',
      enabled: true,
      sortNo: '100004',
      hasDropdown: true
    },
    {
      key: '6',
      code: 'CV02.01.201',
      name: '血缘关系代码表',
      remark: '血缘关系代码表',
      type: 'CV',
      enabled: true,
      sortNo: '100005',
      hasDropdown: true
    },
    // {
    //   key: '7',
    //   code: '',
    //   name: '',
    //   remark: '',
    //   type: 'CV',
    //   enabled: true,
    //   sortNo: '',
    //   hasDropdown: true
    // },
    // {
    //   key: '8',
    //   code: '',
    //   name: '',
    //   remark: '',
    //   type: 'CV',
    //   enabled: true,
    //   sortNo: '',
    //   hasDropdown: true
    // }
  ];

  // 列定义
  const columns = [
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      width: 180,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 220,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 300,
    },
    {
      title: '类别',
      dataIndex: 'type',
      key: 'type',
      width: 120,
      render: (type: string, record: DomainItem) => (
        <div className="type-cell">
          {type}
          {record.hasDropdown && <span className="dropdown-icon">▼</span>}
        </div>
      ),
    },
    {
      title: '有效状态',
      dataIndex: 'enabled',
      key: 'enabled',
      width: 100,
      render: (enabled: boolean, record: DomainItem) => (
        <Switch 
          checked={enabled} 
          onChange={(checked) => handleStatusChange(checked, record)}
          size="small"
          className="status-switch"
        />
      ),
    },
    {
      title: '排序号',
      dataIndex: 'sortNo',
      key: 'sortNo',
      width: 100,
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: DomainItem) => (
        <Space size="small" className="action-buttons">
          {record.code ? (
            <>
              <a className="edit-link">编辑</a>
              <span className="divider">|</span>
              <a className="delete-link">删除</a>
            </>
          ) : (
            <>
              <a className="check-link"><CheckCircleOutlined /></a>
              <a className="close-link"><CloseCircleOutlined /></a>
            </>
          )}
        </Space>
      ),
    },
  ];

  // 过滤数据
  const filteredData = data.filter(item => {
    const matchesSearch = !searchValue || 
      item.code.toLowerCase().includes(searchValue.toLowerCase()) || 
      item.name.toLowerCase().includes(searchValue.toLowerCase());
    const matchesStatus = statusFilter === 'all' || 
      (statusFilter === 'enabled' && item.enabled) || 
      (statusFilter === 'disabled' && !item.enabled);
    return matchesSearch && matchesStatus;
  });

  return (
    <div className="datadomain-container">
      <Card bordered={false} title="值域">
        <div className="table-top">
          <Space>
            <Button type="primary" onClick={showModal}>新增</Button>
            <Select 
              value={statusFilter} 
              onChange={(value) => setStatusFilter(value)}
              style={{ width: 120 }}
            >
              <Option value="all">可用</Option>
              <Option value="enabled">启用</Option>
              <Option value="disabled">禁用</Option>
            </Select>
          </Space>
          <Input.Search
            placeholder="值域代码/名称"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            onSearch={value => setSearchValue(value)}
            style={{ width: 300 }}
          />
        </div>
        
        <Table 
          columns={columns} 
          dataSource={filteredData}
          pagination={{
            pageSize: 10,
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: (total) => `每页 ${15} 条 (共${total}条)`,
          }}
          rowClassName={(record) => {
            if (record.code === 'GB/T 2261.1-2003') return 'highlighted-row';
            return '';
          }}
        />
      </Card>

      <Modal
        title="值域信息"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          name="domain_form"
          initialValues={{
            type: 'CV',
            enabled: true,
            sortNo: '999999'
          }}
        >
          <Form.Item
            name="code"
            label="值域代码"
            rules={[{ required: true, message: '请输入值域代码' }]}
          >
            <Input placeholder="请输入值域代码" />
          </Form.Item>

          <Form.Item
            name="name"
            label="值域名称"
            rules={[{ required: true, message: '请输入值域名称' }]}
          >
            <Input placeholder="请输入值域名称" />
          </Form.Item>

          <Form.Item
            name="type"
            label="值域类型"
            rules={[{ required: true, message: '请选择值域类型' }]}
          >
            <Radio.Group>
              <Radio value="CV">CV</Radio>
              <Radio value="GB/T">GB/T</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="remark"
            label="备注"
          >
            <Input.TextArea rows={3} placeholder="请输入备注信息" />
          </Form.Item>

          <Form.Item
            name="sortNo"
            label="排序号"
          >
            <Input placeholder="请输入排序号" />
          </Form.Item>

          <Form.Item
            name="enabled"
            label="状态"
          >
            <Radio.Group>
              <Radio value={true}>启用</Radio>
              <Radio value={false}>禁用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default DataDomain; 
